<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">
</head>

<body class="">


    <div class="sc-container" id="app">



        <div id="search-wrap" class="clearfix">

            <!-- 首行 -->
            <div class="search_first_line clearfix">

                <Cascader id="category" style="display:inline-block;" :data="searchForm.categoryArr" v-model="searchForm.subCategory" placeholder="请选择行政区"></Cascader>
                <date-picker type="year" placeholder="请选择年度"></date-picker>
                <i-select placeholder="请选择上一版本" style="display:inline-block;width:180px;">
                    <i-option value="v1.0.5">人工报送</i-option>
                    <i-option value="v1.0.4">数据交换</i-option>
                </i-select>
                <div class="searchKey_container" style="float:right">
                    <i-input v-model="searchKey" placeholder="请输入要搜索的内容"></i-input>
                    <i-button type="primary">查询</i-button>
                </div>

            </div>



        </div>




        <div id="list-top-wrap" class="clearfix">
            业务类型：
            <Tag checkable type="dot" color="blue">电话网络投诉：794</Tag>
            <Tag checkable type="dot" color="green">人民来信：224</Tag>
            <Tag checkable type="dot" color="red">群众上访：33</Tag>
            <Tag checkable type="dot" color="yellow">全部：1051</Tag>
        </div>

        <div id="list-wrap" class="clearfix">

            <i-table stripe :columns="columns1" :data="data2" :stripe="true" :disabled-hover='true' :highlight-row="true"></i-table>
        </div>

        <div id="list-pager-wrap" class="clearfix">

            <Page :total="100" show-sizer show-elevator show-total></Page>
        </div>





    </div>


    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })


        var app = new Vue({
            el: '#app',
            data: {

                searchKey: '',
                formInline: {
                    user: '33'
                },

                openUrlType: true,
                columns1: [{
                    title: '序号',
                    key: 'index',
                    width: 60
                }, {
                    title: '行政区',
                    key: 'area',
                    width: 80,
                }, {
                    title: '信访投诉对象',
                    key: 'toName',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'

                                },
                                style: {
                                    color: '#57A3F3'
                                }
                            }, params.row.toName)
                        ]);
                    }
                }, {
                    title: '受理日期',
                    key: 'opDate',
                    width: 100
                }, {
                    title: '信访内容',
                    key: 'opDate'
                }, {
                    title: '业务肉容',
                    key: 'content'
                }, {
                    title: '受理渠道',
                    key: 'opType',
                    width: 100
                }, {
                    title: '处办单位',
                    key: 'opOrg'
                }, {
                    title: '结束时间',
                    key: 'closeDate',
                    width: 100
                }, {
                    title: '操作',
                    key: 'operate',
                    width: 80,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                style: {
                                    color: '#57A3F3'
                                },
                                on: {
                                    click: function() {

                                        app.changePageUrl()
                                    }
                                }
                            }, params.row.operate),

                        ]);
                    }
                }],
                data2: [{
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }, {
                    index: 1,
                    area: '南京市',
                    toName: '南京绿联环境科技发展有限公司',
                    opDate: '2015-08-09',
                    content: '南京市栖霞区群众致信省厅...',
                    opType: '省厅',
                    opOrg: '南京市环境局',
                    closeDate: '2015-10-03',
                    operate: '查看'

                }],
                searchForm: {
                    subCategory: [],
                    categoryArr: [{
                        value: '1',
                        label: '环境监控',
                        children: [{
                            value: '11',
                            label: '移动执法'
                        }, {
                            value: '12',
                            label: '厦门环保'
                        }]
                    }, {
                        value: '2',
                        label: '污水治理',
                        children: [{
                            value: '21',
                            label: '污染指标'
                        }, {
                            value: '22',
                            label: '污染地区'

                        }],
                    }]
                }
            },
            mounted: function() {
                //折叠面板事件
                InitiateWidgets();

                this.formLeftIconLine();
            },
            methods: {
                changePageUrl: function() {

                    var item = {
                        menuName: '信访投诉查看',
                        iconBgCls: 'bg_5CADFF',
                        // iconCls: 'fa-car',
                        url: '../innerPage/信访投诉查看.html',
                        iconImgUrl: '../static/images/deskCloud/简易申报接收.png',
                        isTop: true,
                        groupId: 1,
                        groupName: '环保工作部门',
                        toDel: false,
                        toAdd: false
                    };
                    var a = window.parent.app.changePageUrl({
                        url: item.url,
                        menuName: item.menuName,
                        menuPath: [item.groupName]
                    });

                },
                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px"
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>